<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问答系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
</head>
<body>
    <h1>问答系统</h1>
    <div id="qa-section">
        <form id="qa-form" autocomplete="off">
            <label for="question">请输入你的问题：</label><br>
            <input type="text" id="question" name="question" placeholder="输入问题..." required><br>
            <button type="submit">提交</button>
        </form>
        <div id="answer-section">
            <h3>回答：</h3>
            <p id="answer"></p>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $('#qa-form').submit(function(event){
                event.preventDefault();
                var question = $('#question').val();
                
                $.ajax({
                    url: '/ask',
                    method: 'POST',
                    data: {question: question},
                    success: function(response){
                        $('#answer').text(response.answer);
                    },
                    error: function(error){
                        $('#answer').text('出现错误，请重试。');
                    }
                });
            });
        });
    </script>
</body>
</html>
